<template>
    <el-table :data="orderData" border style="width: 100%" v-loading="tableLoading">
        <el-table-column align="center" prop="imageUrl" label="产品图片" width="120">
            <template #default="scope">
                <!-- <el-avatar :src="scope.row.imageUrl"></el-avatar> -->
                <img :src="scope.row.orderDetail[0].imageUrl" width="100" alt="">
            </template>
        </el-table-column>
        <el-table-column align="center" prop="order_id" label="订单编号" />
        <el-table-column align="center" prop="orderDetail[0].productName" width="80" label="产品名称" />
        <el-table-column align="center" prop="orderDetail[0].quantity" label="数量" width="100" />
        <el-table-column align="center" prop="total_fee" label="总价格" width="100" />
        <el-table-column align="center" prop="create_time" label="创建时间" />
        <el-table-column align="center" prop="pay_status" label="支付状态" width="100">
            <template #default="{ row }">
                {{ row.pay_status == 1 ? "已支付" : "未支付" }}
            </template>
        </el-table-column>
        <!-- 0未提交 1提交成功 2已经取消 3无效订单 4.交易关闭 5退货 -->
        <el-table-column align="center" prop="order_status" label="订单状态" width="100">
            <template #default="scope">
                <b v-if="scope.row.order_status === 0">未提交</b>
                <b v-else-if="scope.row.order_status === 1">提交成功</b>
                <b v-else-if="scope.row.order_status === 2">已取消</b>
                <b v-else-if="scope.row.order_status === 3">无效订单</b>
                <b v-else-if="scope.row.order_status === 4">交易关闭</b>
                <b v-else-if="scope.row.order_status === 5">退货</b>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="action" label="操作">
            <template #default="scope">
                <el-button @click="pay(scope
                .row)" type="primary" :disabled="scope.row.pay_status === 1 || scope.row.order_status === 4">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongzhi"></use>
                    </svg>
                    <b style="margin-left:5px">去支付</b>
                </el-button>
                <el-button type="danger">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongzhi"></use>
                    </svg>
                    <b style="margin-left:5px">删除</b>
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue"
import * as api from "@/api/vip"
import { useRouter } from "vue-router"

let router = useRouter()

//表格数据
const orderData = ref([])

//控制加载动画
let tableLoading = ref(false)

//获取产品的方法

let getOrder = async () => {
    tableLoading.value = true;
    try {
        let res = await api.getOrderApi()
        console.log(res)
        orderData.value = res.data.data;
        tableLoading.value = false;
    } catch (e) {
        console.log(e)
    }
}
getOrder()

//去支付的逻辑

//1.点击按钮,携带当前的订单id

//2.跳转到 pay/payment

let pay = (row) => {
    router.push({ name: "payment", query: { order_id: row.order_id } })
}
</script>
